<template>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

  <!-- Simple header with scrollable tabs. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">卖夕夕 商家页(@{{ user.name }})</span>
      </div>
      <!-- Tabs -->
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="#scroll-tab-1" class="mdl-layout__tab is-active">商品管理</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab" @click="this.$refs.orders.getOrder">订单管理</a>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">商家页</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" @click="backToWelcome">返回卖夕夕</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
        <div class="page-content">
          <!-- 商品管理 -->
          <div class="commodity" id="div_commodity">
            <MerchantCommodityCard v-for="comm in commodity_list" :commodity=comm :id=comm.id :name=comm.name
              :price=comm.price />
            <MerchantCommodityAddButton :switchToAddComm="switchToAddComm"></MerchantCommodityAddButton>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-2">
        <div class="page-content commodity">
          <!-- 订单管理 -->
          <MerchantOrder ref="orders" />
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-3">
        <div class="page-content commodity">
          <!-- 添加商品 -->
          <MerchantCommodityAdd :backToMainMenu="backToMainMenu" />
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-4">
        <div class="page-content commodity">
          <!-- 修改商品 -->
          <MerchantCommodityEdit ref="edit" :backToMainMenu="backToMainMenu" />
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-4">
        <div class="page-content"><!-- 删除商品 --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-5">
        <div class="page-content commodity">
          <!-- 发货页 -->
          <MerchantShipment ref="shipment" :backToOrder="backToOrder" />
        </div>
      </section>
    </main>
  </div>

  <!-- 消息 -->
  <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</template>

<script>
import MerchantCommodityCard from '../components/MerchantCommodityCard.vue'
import MerchantCommodityAddButton from '../components/MerchantCommodityAddButton.vue'
import MerchantCommodityAdd from '../components/MerchantCommodityAdd.vue'
import MerchantOrder from '../components/MerchantOrder.vue';
import MerchantShipment from '../components/MerchantShipment.vue'
import MerchantCommodityEdit from '../components/MerchantCommodityEdit.vue';

export default {
  components: {
    MerchantCommodityCard,
    MerchantCommodityAddButton,
    MerchantCommodityAdd,
    MerchantOrder,
    MerchantShipment,
    MerchantCommodityEdit
  },
  created() {
    this.checkUser()
    this.getMyComm()
  },
  data() {
    return {
      user: {
        id: -1,
        name: null,
        group: null,
      },
      commodity_list: []
    }
  },
  methods: {
    backToWelcome() {
      window.location.href = "/#/welcome"
      window.location.reload()
    },
    getUser(callback) {
      this.$axios({
        method: "post",
        url: "/user/getUser",
      }).then((res) => {
        if (res.data.code == "0") {
          this.user.id = parseInt(res.data.data.id)
          this.user.name = res.data.data.user
          this.user.group = res.data.data.user_group
        } else {
          this.user.id = -1
          this.user.name = null
          this.user.group = null
        }
        callback()
      })
    },
    checkUser() {
      this.getUser(() => {
        if (this.user.group != 'merchant') {
          this.backToWelcome()
        }
      })
    },
    getMyComm() {
      //刷新商品
      this.$axios({
        method: "post",
        url: "/merchant/getMyComm",
      }).then((res) => {
        this.commodity_list = res.data.data;
      })
    },
    switchToAddComm() {
      this.switchTab(3)
    },
    switchToShipment() {
      this.switchTab(5)
    },
    switchToEdit() {
      this.switchTab(4)
    },
    backToMainMenu() {
      this.switchTab(1)
    },
    backToOrder() {
      this.$refs.orders.getOrder()
      this.switchTab(2)
    },
    switchTab(num) {
      var max_num = 5
      var scrollTabs = new Array()
      for (var i = 0; i < max_num; i++) {
        scrollTabs[i] = document.getElementById('scroll-tab-' + (i + 1))
        scrollTabs[i].classList.remove('is-active')
      }
      scrollTabs[num - 1].classList.add('is-active');
    },
    msg(msg) {
      var snackbarContainer = document.querySelector('#demo-toast-example');
      var data = { message: msg };
      snackbarContainer.MaterialSnackbar.showSnackbar(data);
    },
  }
}
</script>

<style scoped>
.commodity {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
  margin: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
</style>